<template>
  <div class="tinymce">
    <VueTinymce ref="tinymceTxt" v-model="content" :setup="setup" :setting="setting" />
  </div>
</template>

<script>
// import { mapState } from "vuex";
// import zh_CN  from "@/utils/zh-Hans.js";
// const zh_CN = "https://user.yfpoll.com/langs/zh_CN.js";
import zh_CN from '@/utils/zh_CN.js'
export default {
  name: "Tinymce",
  props: {
    msg: {
      required: true,
    },
    // value: {
    //   type: String,
    //   default: "",
    // },
    // TinymceName:{
    //   required:true
    // }
  },
  data() {
    return {
      type: "",
      content: "",
      setting: {
        width:'100%',
        height: 580, //富文本高度
        language_url: zh_CN, //中文包
        language: "zh_CN", //中文
        forced_root_block:false,
        browser_spellcheck: true, // 拼写检查
        resize: false, //禁止用户拖动改变编辑器大小
        branding: false, // 去水印
        elementpath: true, //暂停编辑器底部的状态栏
        statusbar: true, // 显示编辑器底部的状态栏
        paste_data_images: true, // 是否允许粘贴图像
        menubar: false, // 隐藏最上方menu
        fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体
        file_picker_types: "file image",
        images_upload_credentials: true,
        paste_retain_style_properties: "font-size font-style",
        plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table paste code help wordcount",
        ],
        media_alt_source: false,
        media_dimensions: false,
        media_filter_html: false,
        media_poster: false,
        //嵌入代码判断
        media_url_resolver: (data, resolve /*, reject*/) => {
          // if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
          //   const embedHtml = `<iframe src="${data.url}" width="400" height="400" ></iframe>`;
          //   resolve({ html: embedHtml });
          // } else {
          //   resolve({ html: '' });
          // }
          console.log(data, "1");
        },
        video_template_callback: (data) => {
          console.log(data, "2");
          // `<video width="${data.width}" height="${data.height}"${data.poster ? ` poster="${data.poster}"` : ''} controls="controls">\n` +
          // `<source src="${data.source}"${data.sourcemime ? ` type="${data.sourcemime}"` : ''} />\n` +
          // (data.altsource ? `<source src="${data.altsource}"${data.altsourcemime ? ` type="${data.altsourcemime}"` : ''} />\n` : '') +
          // '</video>'
        },
        audio_template_callback: (data) => {
          // '<audio controls>\n' +
          // `<source src="${data.source}"${data.sourcemime ? ` type="${data.sourcemime}"` : ''} />\n` +
          // (data.altsource ? `<source src="${data.altsource}"${data.altsourcemime ? ` type="${data.altsourcemime}"` : ''} />\n` : '') +
          // '</audio>'
          console.log(data, "3");
        },
        paste_webkit_styles: "all",
        toolbar: [
          // "paste fontselect | fontsizeselect | link image  aligncenter alignjustify ",
          "paste fontselect | fontsizeselect | aligncenter alignjustify ",
          " alignright alignleft lineheight  forecolor backcolor bold italic underline strikethrough   quicklink h2  blockquote   preview code",
        ],
        // 文件上传
        file_picker_callback: function (callback, value, meta) {
          var filetype = "";
          //后端接收上传文件的地址
          var upurl = null;
          //为不同插件指定文件类型及后端地址
          switch (meta.filetype) {
            case "image":
              upurl = dns + "/api/common/upload";
              filetype = ".jpg, .jpeg, .png, .gif";
              break;
            case "media":
              upurl = dns + "/api/common/uploadFile";
              filetype = ".mp3, .mp4";
              console.log(upurl);
              break;
            case "file":
              upurl = dns + "/api/common/uploadFile";
              filetype =
                ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx";
              break;
            default:
          }
          // 模拟出一个input用于添加本地文件
          var input = document.createElement("input");
          input.setAttribute("type", "file");
          input.setAttribute("accept", filetype);
          input.click();
          input.onchange = function () {
            var file = this.files[0];
            var xhr, formData;
            console.log(file.name);
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open("POST", upurl);
            xhr.onload = function () {
              var json;
              json = JSON.parse(xhr.responseText);
              if (meta.filetype == "file") {
                callback(json.data.fullurl, { text: json.data.filename });
              }
              if (meta.filetype == "image") {
                callback(json.data.fullurl, { alt: json.data.filename });
              }
              if (meta.filetype == "media") {
                callback(json.data.fullurl, {
                  source2: "alt.ogg",
                  poster: "image.jpg",
                });
              }
              meta = null;
            };
            formData = new FormData();
            formData.append("file", file, file.name);
            formData.append("token", localStorage.token);
            xhr.send(formData);
          };
        },
        tiny_pageembed_classes: [],
      },
      // setting: {
      //   width:'100%',
      //   height: 580, //富文本高度
      //   language_url: zh_CN, //中文包
      //   language: 'zh_CN', //中文
      //   browser_spellcheck: true, // 拼写检查
      //   resize:false,//禁止用户拖动改变编辑器大小
      //   branding: false, // 去水印
      //   elementpath: true, //暂停编辑器底部的状态栏
      //   statusbar: true, // 显示编辑器底部的状态栏
      //   paste_data_images: true, // 是否允许粘贴图像
      //   menubar: false, // 隐藏最上方menu
      //   fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', //字体大小
      //   font_formats:'微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', //字体
      //   file_picker_types: 'file image',
      //   images_upload_credentials: true,
      //   paste_retain_style_properties: "font-size font-style",
      //   plugins: [
      //     'advlist autolink lists link image charmap print preview anchor',
      //     'searchreplace visualblocks code fullscreen',
      //     'insertdatetime media table paste code help wordcount',
      //   ],
      //   media_alt_source:false,
      //   media_dimensions:false,
      //   media_filter_html: false,
      //   media_poster: false,
      //   //嵌入代码判断
      //   media_url_resolver: (data, resolve/*, reject*/) => {
      //     // if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
      //     //   const embedHtml = `<iframe src="${data.url}" width="400" height="400" ></iframe>`;
      //     //   resolve({ html: embedHtml });
      //     // } else {
      //     //   resolve({ html: '' });
      //     // }
      //     console.log(data,'1');
      //   },
      //   video_template_callback: (data) =>{
      //     console.log(data,'2');
      //       // `<video width="${data.width}" height="${data.height}"${data.poster ? ` poster="${data.poster}"` : ''} controls="controls">\n` +
      //       // `<source src="${data.source}"${data.sourcemime ? ` type="${data.sourcemime}"` : ''} />\n` +
      //       // (data.altsource ? `<source src="${data.altsource}"${data.altsourcemime ? ` type="${data.altsourcemime}"` : ''} />\n` : '') +
      //       // '</video>'
      //   },
      //   audio_template_callback: (data) =>{
      //     // '<audio controls>\n' +
      //     // `<source src="${data.source}"${data.sourcemime ? ` type="${data.sourcemime}"` : ''} />\n` +
      //     // (data.altsource ? `<source src="${data.altsource}"${data.altsourcemime ? ` type="${data.altsourcemime}"` : ''} />\n` : '') +
      //     // '</audio>'
      //     console.log(data,'3');
      //   },
      //   paste_webkit_styles: "all",
      //   toolbar: ['paste fontselect | fontsizeselect | link image  aligncenter alignjustify ' ,' alignright alignleft lineheight  forecolor backcolor bold italic underline strikethrough   quicklink h2  blockquote   preview code'],
      //   // 文件上传
      //   file_picker_callback: function (callback, value, meta) {
      //     var filetype='';
      //       //后端接收上传文件的地址
      //     var upurl=null;
      //       //为不同插件指定文件类型及后端地址
      //     switch(meta.filetype){
      //       case 'image':
      //           upurl=process.env.VUE_APP_BASE_API+'/turntable/index/uploadPhoto'
      //           filetype='.jpg, .jpeg, .png, .gif';
      //           break;
      //       // case 'media':
      //       //     upurl=dns+'/api/common/uploadFile'
      //       //     filetype='.mp3, .mp4';
      //       //     console.log(upurl);
      //       //     break;
      //       // case 'file':
      //       //   upurl=dns+'/api/common/uploadFile'
      //       //   filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx';
      //       //   break;
      //       //   default:
      //     }
      //     // 模拟出一个input用于添加本地文件
      //     var input = document.createElement('input');
      //     input.setAttribute('type', 'file');
      //     input.setAttribute('accept', filetype);
      //     input.click();
      //     input.onchange = function() {
      //       var file = this.files[0];
      //       var xhr, formData;
      //       console.log('----:',file,file.name);
      //       xhr = new XMLHttpRequest();
      //       // xhr.setRequestHeader('XX-Device-Type','web');
      //       // xhr.withCredentials = false;
      //       xhr.open('POST', upurl);
      //       xhr.setRequestHeader('XX-Token',getToken());
      //       xhr.setRequestHeader('XX-Device-Type','web');
      //       xhr.onload = function() {
      //         var json;
      //         json = JSON.parse(xhr.responseText);
      //       //   if (meta.filetype == 'file') {
      //       //     console.log('json:',json)
      //       //     callback(json.data.fullurl, {text: json.data.filename});
      //       //   }
      //         if (meta.filetype == 'image') {
      //           console.log('json:',json)
      //           callback(process.env.VUE_APP_BASE_API+'/'+json.data, {alt: file.name});
      //         }
      //       //   if (meta.filetype == 'media') {
      //       //     callback(json.data.fullurl, {source2: 'alt.ogg', poster: 'image.jpg'});
      //       //   }
      //           meta=null
      //       };
      //       formData = new FormData();
      //       formData.append('photo', file);
      //       // formData.append("token",localStorage.token);
      //       xhr.send(formData);
      //     }
      //   },
      //   tiny_pageembed_classes: []
      // }
    };
  },
  mounted() {
    this.$nextTick(()=>{
      // this.$refs.tinymceTxt.setContent(this.msg)
      this.content = this.msg;
      this.$refs.tinymceTxt.editor.mode.set('readonly');
    })
    // this.content = this.msg;
  },
  // updated(){
  //   this.$refs.tinymceTxt.editor.mode.set('readonly');
  // },
  watch: {
    msg: {
      handler(val, value) {
        this.content = val;
        // this.$nextTick(()=>{
        //   this.$refs.tinymceTxt.setContent(this.msg)
        // })
      },
      immediate: true,
    },
    // value: {
    //   handler(val) {
    //     if (val !== this.content) {
    //       this.content = val === null ? "" : val;
    //       // if (this.Quill) {
    //       //   this.Quill.pasteHTML(this.currentValue);
    //       // }
    //     }
    //   },
    //   immediate: true,
    // },

    // TinymceName:{
    //   handler(val,value){
    //     // if(val=="basic"){
    //     //   this.type=1
    //     //   this.setting.height=580
    //     // }else if(val=="addplyer"){
    //     //   this.type=2
    //     //   this.setting.height=418
    //     // }else if(val=="xg_player"){
    //     //   this.type=3
    //     //   this.setting.height=418
    //     // }else if(val=="dynamic"){
    //     //   this.type=4
    //     //   this.setting.height=490
    //     // }else if(val=="xg_dynamic"){
    //     //   this.type=5
    //     //   this.setting.height=490
    //     // }else if(val=="workorder"){
    //     //   this.type=6
    //     //   this.setting.height=490
    //     //   this.setting.width=920
    //     // }else if(val=="workCheck"){
    //     //   this.type=7
    //     //   this.setting.height=490
    //     //   this.setting.width=1200
    //     // }
    //   },
    //   immediate: true
    // }
  },
  methods: {
    blur() {
      console.log("失去焦点了");
    },

    setup(editor) {
      let that = this;
      editor.on("blur", function () {
        // if(that.type==1){
        console.log('this.content:',that.content)
        that.changeData();
        // that.basic()
        // }else if(that.type==2){
        //   that.changeDataAddplayer()
        // }else if(that.type==3){
        //   that.changePlayer()
        // }else if(that.type==4){
        //  that.changeDynamic()
        // }else if(that.type==5){
        //   that.changeXgDynamic()
        // }else if(that.type==6){
        //   that.changework()
        // }else if(that.type==7){
        //   that.changeworkcheck()
        // }
      });
    },
    changeData() {
      this.$emit("msgBasic", this.content);
    },
    changework() {
      this.$bus.$emit("msgwork", this.content);
    },
    changeworkcheck() {
      this.$bus.$emit("workcheck", this.content);
    },
    changeDataAddplayer() {
      this.$emit("msgAddPlayer", this.content);
    },
    changePlayer() {
      this.$emit("xg_player", this.content);
    },
    changeDynamic() {
      this.$emit("add_dynamic", this.content);
    },
    changeXgDynamic() {
      this.$emit("xg_dynamic", this.content);
    },
    // basic(){
    //     let that =this
    //     activity_xg({
    //       token: that.$cookies.get("token"),
    //       action_id: that.$route.query.id,
    //       content: that.content,
    //     }).then((res) => {
    //       if (res.data.code !== 0) {
    //         that.$message({
    //           type: "success",
    //           message: res.data.msg,
    //           offset: 120,
    //         });
    //         // 修改成功刷新iframe
    //         that.refreshFn(that.iframeUrl);
    //       } else {
    //         that.$message({
    //           type: "warning",
    //           message: res.data.msg,
    //           offset: 120,
    //         });
    //       }
    //     });
    // },
  },
  computed: {
    // ...mapState(["iframeUrl"]),
  },
};
</script>

<style scoped>
::v-deep .tox-tinymce-aux {
  z-index: 99999 !important;
}
</style>
